<!-- <!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>仿遥控器按钮</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}

		.content {
			width: 400px;
			height: 400px;
			position: relative;
			margin: 100px auto;
			left: 0;
			top: 50%;
			bottom: 0;
			right: 0;
			box-shadow: 0px 0px 110px rgba(180, 180, 180, 0.3) inset, 0px 0px 5px #D3D3D3;
		}

		.quartercircle {
			position: absolute;
			width: 200px;
			height: 200px;
			-webkit-border-radius: 200px 0 0 0;
			border: 1px solid #888888;
		}

		.divLeft {
			top: 25%;
			left: -10%;
			transform: rotate(-45deg);
			background-color: bisque;
		}

		.divTop {
			top: -10%;
			left: 25%;
			transform: rotate(45deg);
			background-color: burlywood;
		}

		.divRight {
			top: 25%;
			left: 60%;
			transform: rotate(135deg);
			background-color: darkgray;
		}

		.divBottom {
			top: 60%;
			left: 25%;
			transform: rotate(-135deg);
			background-color: darkkhaki;
		}

		.circle {
			width: 50%;
			height: 50%;
			position: absolute;
			z-index: 100;
			top: 0%;
			left: 0%;
			bottom: 0;
			right: 0;
			margin: auto;
			border-radius: 100%;
			background-color: #889900;
			text-align: center;
		}

		.circle span {
			display: block;
			width: 100%;
			height: 100%;
			line-height: 200px;
			font-size: 24px;
		}

		.quartercircle:hover {
			background: #8BFF7C;
		}

		.quartercircle a {
			position: absolute;
			width: 100%;
			height: 100%;
			background: #888888;
		}

		.quartercircle a:hover {
			background: #8BFF7C;
		}
	</style>

<body>


	<div class="content" style="">
		<div class="quartercircle divLeft" style="">
			<a href="#" style="background: url(left.png) no-repeat center;"></a>
		</div>
		<div class="quartercircle divTop" style="">
			<a href="#" style="background: url(top.png) no-repeat center;"></a>
		</div>
		<div class="quartercircle divRight" style="">
			<a href="#" style="background: url(left.png) no-repeat center;"></a>
		</div>
		<div class="quartercircle divBottom" style="">
			<a href="#"
				style="display:block;position:absolute;z-index:50;background: url(bottom.png) no-repeat center;"></a>
		</div>
		<div class="circle" style=""><span style="">OK</span></div>
	</div>

</body>

</html> -->

<!-- <!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		.content {
			width: 400px;
			height: 400px;
			position: relative;
			margin: 100px auto;
			left: 0;
			top: 50%;
			bottom: 0;
			right: 0;
			box-shadow: 0px 0px 110px rgba(180, 180, 180, 0.3) inset, 0px 0px 5px #D3D3D3;
		}

		.quartercircle {
			position: absolute;
			width: 200px;
			height: 200px;
			-webkit-border-radius: 200px 0 0 0;
			border: 1px solid #888888;
		}

		.divLeft {
			top: 25%;
			left: -10%;
			transform: rotate(-45deg);
			background-color: bisque;
		}

		.divTop {
			top: -10%;
			left: 25%;
			transform: rotate(45deg);
			background-color: burlywood;
		}

		.divRight {
			top: 25%;
			left: 60%;
			transform: rotate(135deg);
			background-color: darkgray;
		}

		.divBottom {
			top: 60%;
			left: 25%;
			transform: rotate(-135deg);
			background-color: darkkhaki;
		}

		.circle {
			width: 50%;
			height: 50%;
			position: absolute;
			z-index: 100;
			top: 0%;
			left: 0%;
			bottom: 0;
			right: 0;
			margin: auto;
			border-radius: 100%;
			background-color: #889900;
			text-align: center;
		}

		.circle span {
			display: block;
			width: 100%;
			height: 100%;
			line-height: 200px;
			font-size: 24px;
		}

		.quartercircle:hover {
			background: #8BFF7C;
		}

		.quartercircle a {
			position: absolute;
			width: 100%;
			height: 100%;
			background: #888888;
		}

		.quartercircle a:hover {
			background: #8BFF7C;
		}

		body {
			background: #525252;
		}

		.sector {
			position: relative;
			width: 200px;
			height: 200px;
			margin: 0 auto;
			border: 2px solid #4a4a4a;
			border-radius: 50%;
			background: #4a4a4a;
		}

		.sector .box {
			position: absolute;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			clip: rect(0px, 99px, 99px, 0);
		}

		.sector .box,
		.sector .center {
			transition: 0.5s;
			background: #5e5e5e;
			cursor: pointer;
		}

		.sector .box:hover,
		.sector .center:hover {
			background: #777;
		}

		.sector .s1 {
			transform: rotate(45deg);
		}

		.sector .s2 {
			transform: rotate(135deg);
		}

		.sector .s3 {
			transform: rotate(-135deg);
		}

		.sector .s4 {
			transform: rotate(-45deg);
		}

		.sector .center {
			width: 90px;
			height: 90px;
			position: absolute;
			left: 54px;
			top: 54px;
			border: 2px solid #4a4a4a;
			border-radius: 50%;
		}
	</style>
</head>

<body>
	<div class="content" style="">
		<div class="quartercircle divLeft" style="">
			<a href="#" style="background: url(left.png) no-repeat center;"></a>
		</div>
		<div class="quartercircle divTop" style="">
			<a href="#" style="background: url(top.png) no-repeat center;"></a>
		</div>
		<div class="quartercircle divRight" style="">
			<a href="#" style="background: url(left.png) no-repeat center;"></a>
		</div>
		<div class="quartercircle divBottom" style="">
			<a href="#"
				style="display:block;position:absolute;z-index:50;background: url(bottom.png) no-repeat center;"></a>
		</div>
		<div class="circle" style=""><span style="">OK</span></div>
	</div>

	<div class="sector">
		<div class="box s1"></div>
		<div class="box s2"></div>
		<div class="box s3"></div>
		<div class="box s4"></div>
		<div class="center"></div>
	</div>
</body>

</html> -->


<!-- <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="keywords" content="Orb trails">
        <meta name="description" content="Orb trails">
        <title>Orb trails</title>
        <style>
            body {
                background: black;
                color: #aaa;
                font: 12px/20px helvetica, arial, sans-serif;
                overflow: hidden;
            }
            #control-panel {
                position: absolute;
                padding: 10px;
                border: 1px dotted Cornsilk;
                border-radius: 10px;
                background-color: rgba(0,0,0,.5);
            }
            #control-panel button {
                margin: 5px 10px 5px 0;
                width: 60px;
            }
            #control-panel input {
                /* 添加这句后按钮和文字才会对齐 */
                vertical-align:middle;
            }
        </style>
    </head>
    <body>
        <div id="control-panel">
            Click and drag to make more!
            <br/>
            <label>Direction: </label>
            <input type="radio" name="direction" value="clockwise" checked/>Clockwise
            <input type="radio" name="direction" value="counterclockwise">Counterclockwise
            <br/>
            <label>Angular Speed: </label>
            <input type="radio" name="stepType" value="same" checked />Same
            <input type="radio" name="stepType" value="random"/>Random
            <br/>
            <label>Trails: </label>
            <input type="checkbox" id="trail" checked/>
            <br/>
            <button id="init">Init</button>
            <button id="clear">Clear</button>
            <button id="switchState">Pause</button>
            <br/>
            我在残酷的现实中反复挣扎，<br/>
            残酷的现实却让我无法自拔。
        </div>
        <canvas id="canvas">Your browser can not support canvas</canvas>
        <script>
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            var halfPI = Math.PI / 2;
            var doublePI = Math.PI * 2;

            //天体线条笔帽
            var lineCap = "round";
            //用来制作天体尾巴的蒙版透明度(透明度越低,尾巴越长)
            var maskAlpha = 0.1;
            //初始化的天体个数
            var initCount = 30;
            //每帧一次性更新和渲染的次数
            var onceUpdateAndRenderTimes = 4;
            //为了防止粒子被添加的太多,这里设置只有x或y的差值大于该阀值才能被添加
            var offsetThreshold = 5;

            //画布中心点坐标
            var cx;
            var cy;

            //旋转方向[clockwise(顺时针), counterClockwise(逆时针)]
            var direction = "clockwise";
            //角速度步长[same(相同角速度), random(随机角速度)]
            var stepType = "same";
            //是否显示天体的尾巴
            var isTrails = true;
            //是否暂停
            var isPause = false;

            //天体粒子数组
            var orbs = [];

            //在[min,max]中随机选取一个数
            function randomAtRange(obj) {
                return Math.random() * (obj.max - obj.min) + obj.min;
            }

            //画线条
            function strokeLine(x1, y1, x2, y2) {
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.stroke();
            }

            //天体粒子
            var Orb = function(x, y) {
                //宽度范围
                var widthRange = {min: 1, max: 3};
                //等角速度的时候的步长
                var sameRadianStep = 0.01;
                //随机角速度时候的步长
                var randomRadianRange = {min: 0.005, max: 2 * sameRadianStep};

                //上一次的位置
                var lastX = x;
                var lastY = y;
                //与中心的距离(右下为正)
                var dx = x - cx;
                var dy = y - cy;
                //距画布中心的半径
                var radius = Math.sqrt(dx * dx + dy * dy);
                //宽度
                var width = randomAtRange(widthRange);
                //每帧步长
                var step = 0;
                //Math.atan2(y,x)返回(-Math.PI,Math.PI], 返回(x,y)与0点钟方向的夹角, 顺时针方向为正。但由于画布是右下方为正，等价于做垂直镜像
                var radian = Math.atan2(dx, dy);
                //色相
                var hue;

                //绕中心旋转速度类型[same(等角速度)、random(随机)]
                this.resetStepType = function() {
                    if(stepType === "same") {
                        step = sameRadianStep;
                    } else {
                        step = randomAtRange(randomRadianRange);
                    }
                }

                //判断当前点是否与给定点离的很近
                this.isNear = function(pointX, pointY) {
                    if(Math.abs(pointX - x) < offsetThreshold && Math.abs(pointY - y) < offsetThreshold) {
                        return true;
                    }
                    return false;
                }

                //当画布大小被改变的时候
                this.resetPos = function() {
                    x = lastX = cx + radius * Math.sin(radian);
                    y = lastY = cy + radius * Math.cos(radian);
                }

                this.update = function() {
                    lastX = x;
                    lastY = y;
                    x = cx + radius * Math.sin(radian);
                    y = cy + radius * Math.cos(radian);
                    hue = 360 * radian / doublePI;
                    if(direction === "clockwise") {
                        radian = (radian - step) % doublePI;
                    } else {
                        radian = (radian + step) % doublePI;
                    }
                }

                this.render = function() {
                    ctx.strokeStyle = "hsla(" + hue + ",100%,50%,1)";
                    ctx.lineWidth = width;
                    strokeLine(lastX, lastY, x, y);
                }

                this.resetStepType();
                this.resetPos();
            }

            //初始化所有天体
            function initOrbs() {
                var len = Math.min(cx, cy);
                var step = len / (initCount+1);
                orbs = [];
                for(var i=0, offsetY = cy - step; i<initCount; i++, offsetY -= step) {
                    orbs.push(new Orb(cx, offsetY));
                }
            }

            function init() {
                onResize();

                var directionRadios = document.getElementsByName("direction");
                var stepTypeRadios = document.getElementsByName("stepType");
                var trailCb = document.getElementById("trail");
                var initBtn = document.getElementById("init");
                var clearBtn = document.getElementById("clear");
                var switchStateBtn = document.getElementById("switchState");

                window.addEventListener("resize", onResize);

                //指定事件是否在捕获(true)或冒泡(false)阶段执行。true的触发顺序总是在false之前
                canvas.addEventListener("mousedown", onMouseDown, false);
                canvas.addEventListener("mouseup", onMouseUp, false);
                canvas.addEventListener("mouseout", onMouseOut, false);

                //旋转方向
                for(var i=0; i<directionRadios.length; i++) {
                    //这里用change或者click事件均可以
                    directionRadios[i].addEventListener("change", function(){
                        direction = event.target.value;
                    });
                }
                //角速度类型
                for(var i=0; i<stepTypeRadios.length; i++) {
                    //这里用change或者click事件均可以
                    stepTypeRadios[i].addEventListener("change", function(){
                        stepType = event.target.value;
                        for(var i=0; i<orbs.length; i++) {
                            orbs[i].resetStepType();
                        }
                    });
                }

                //是否显示轨迹
                trailCb.addEventListener("change", function() {
                    isTrails = event.target.checked;
                });
                //清除所有天体
                clearBtn.addEventListener("click", function() {
                    orbs = [];
                    //这里还要清除一下画布,否则上面还有颜色残留,只是用某个透明度的黑覆盖而已
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                });
                //初始化一部分的天体
                initBtn.addEventListener("click", initOrbs);
                //切换天体的运行和停止状态
                switchStateBtn.addEventListener("click", function() {
                    isPause = !isPause;
                    console.log(isPause);
                    switchStateBtn.innerHTML = isPause ? "Pause" : "Start";
                });

                ctx.lineCap = lineCap;
                initOrbs();
                loop();
            }

            function loop() {
                if(!isPause) {
                    if(isTrails) {
                        //使用带透明度的颜色来填充就相当于色彩叠加了
                        ctx.fillStyle = "rgba(0,0,0," + maskAlpha + ")";
                        ctx.fillRect(0, 0, canvas.width, canvas.height);
                    } else {
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                    }
                    for(var i=0; i<orbs.length; i++) {
                        for(var j=0; j<onceUpdateAndRenderTimes; j++) {
                            orbs[i].update();
                            orbs[i].render();
                        }
                    }
                }
                requestAnimationFrame(loop);
            }

            //有一个瑕疵是暂停的话,然后resize,所有的点都会消失
            function onResize() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                cx = canvas.width / 2;
                cy = canvas.height / 2;
                for(var i=0; i<orbs.length; i++) {
                    orbs[i].resetPos();
                }
            }

            function onMouseDown() {
                canvas.addEventListener("mousemove", onMouseMove);
                onMouseMove();
            }

            function onMouseMove() {
                //event.offsetX 等价于 event.pageX - canvas.offsetLeft
                var x = event.offsetX;
                var y = event.offsetY;
                for(var i=0; i<orbs.length; i++) {
                    if(orbs[i].isNear(x, y)) {
                        return;
                    }
                }
                orbs.push(new Orb(x, y));
            }

            function onMouseUp() {
                canvas.removeEventListener("mousemove", onMouseMove);
            }

            function onMouseOut() {
                canvas.removeEventListener("mousemove", onMouseMove);
            }

            init();
        </script>
    </body>
</html> -->


<!-- <!DOCTYPE html>
<html lang="zh">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>radar</title>
    <style>
        canvas {
            margin: 20px auto;
            display: block;
        }
    </style>
</head>
 
<body>
    <canvas id="can" width=300 height=300></canvas>
 
    <script type="text/javascript">
        var CFG = {
            perDeg: 1,
        };
 
        var can = document.getElementById('can');
        var ctx = can.getContext('2d');
        var deg = 0;
        ctx.strokeStyle = 'rgba(0,255,0,1)';
 
        function init() {
            ctx.fillStyle = 'rgba(0,50,0,1)';
            ctx.arc(150, 150, 150, 0, 2 * Math.PI);
            ctx.fill();
            var raf = window.requestAnimationFrame(loop);
        }
 
        function loop() {
            deg = (deg + CFG.perDeg);
            cover();
            drawPosLine();
            drawRadar(deg);
            raf = window.requestAnimationFrame(loop);
        }
 
        function cover() {
            ctx.save();
            ctx.fillStyle = 'rgba(0,0,0,0.02)';
            ctx.arc(150, 150, 150, 0, 2 * Math.PI);
            ctx.fill();
            ctx.restore();
        }
 
        function drawPosLine() {
            ctx.beginPath();
            ctx.moveTo(150, 0);
            ctx.lineTo(150, 300);
            ctx.closePath();
            ctx.stroke();
 
            ctx.beginPath();
            ctx.moveTo(0, 150);
            ctx.lineTo(300, 150);
            ctx.closePath();
            ctx.stroke();
 
            ctx.moveTo(150, 150);
            ctx.beginPath();
            ctx.arc(150, 150, 100, 0 * Math.PI, 2 * Math.PI);
            ctx.closePath();
            ctx.stroke();
 
            ctx.moveTo(150, 150);
            ctx.beginPath();
            ctx.arc(150, 150, 50, 0 * Math.PI, 2 * Math.PI);
            ctx.closePath();
            ctx.stroke();
        }
 
        function drawRadar(iDeg) {
            ctx.fillStyle = 'rgba(0,200,0,.7)';
            ctx.beginPath();
            ctx.moveTo(150, 150);
            ctx.arc(150, 150, 150, (-2 * CFG.perDeg + iDeg) / 180 * Math.PI, (0 + iDeg) / 180 * Math.PI);
            ctx.closePath();
            ctx.fill();
        }
 
        init();
    </script>
</body>
 
</html> -->



<!-- <!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="Author" content="阮家友">
    <meta name="Keywords" content="HTML,model,test">
    <meta name="Description" content="special effect">
    <style type="text/css">
        html,body{font-size:14px;margin:0px;padding:0px;}
        li {list-style:none;}
        img {border:0px;}
        a {text-decoration:none;}
        .clear {clear:both;}
        
        #center {width:800px;margin:0 auto;padding-top:50px;position:relative}
        #c1 {background-color:#333;border-radius: 50%}
    </style>
</head>
<body>
    <div id="center">
        <canvas id="c1" width="160" height="160"></canvas><br/>
        <button id="btn1">start</button>
        <button id="btn2">stop</button>
        <button id="btn3">clear</button>
    </div>
	
<script type="text/javascript">
    //按钮事件
    var ostart = document.getElementById('btn1');
    var ostop = document.getElementById('btn2');
    var oclear = document.getElementById('btn3');
    ostart.onclick = function(){
        obj1.start();
    }
    ostop.onclick = function(){
        obj1.stop();
    }
    oclear.onclick = function(){
        obj1.clear();
    }
	
function CreateCanvasObject(canvasId,func){
    //返回的对象 包含节点Node 绘图环境GC 等属性 和 clear 等方法
    var obj = new Object();
    var ocanvas = document.getElementById(canvasId);
    var ocolor='';
    if(ocanvas.currentStyle)
		ocolor = ocanvas.currentStyle['backgroundColor'];
	else
        ocolor = getComputedStyle(ocanvas,false)['backgroundColor'];
    
    //这里要做判断 是否获取到canvas标签 否则返回 null
    
    //获取画布绘图环境
    var ocanvasGC = ocanvas.getContext('2d');
    obj = 
    {
        Node:ocanvas,
        GC:ocanvasGC,
        timer:'',
        bContinue:false,
        fun:func,
        color:ocolor,
        clear:function(){this.GC.clearRect(0,0,this.Node.width,this.Node.height);},
        start:function(){
            var oThis = this;
            if(oThis.timer)
            {
                oThis.stop();
            }
            oThis.bContinue = true;
            var loop = function()
            {
                oThis.fun(oThis);
                if(oThis.bContinue)
                {
                    oThis.timer = setTimeout(loop,10);
                }
            }
            loop();
        },
        stop:function(){clearTimeout(this.timer);this.bContinue = false;}
    }
    return obj;
}
//二维向量 可表示位置position(x,y)  速度 v(Vx,Vy) 加速度a(Gx,Gy)
Vector2 = function(x, y) { this.x = x; this.y = y; };
var degree=0;
 
Vector2.prototype = {
    copy : function() { return new Vector2(this.x, this.y); },
    length : function() { return Math.sqrt(this.x * this.x + this.y * this.y); },
    sqrLength : function() { return this.x * this.x + this.y * this.y; },
    normalize : function() { var inv = 1/this.length(); return new Vector2(this.x * inv, this.y * inv); },
    negate : function() { return new Vector2(-this.x, -this.y); },
    add : function(v) { return new Vector2(this.x + v.x, this.y + v.y); },
    subtract : function(v) { return new Vector2(this.x - v.x, this.y - v.y); },
    multiply : function(f) { return new Vector2(this.x * f, this.y * f); },
    divide : function(f) { var invf = 1/f; return new Vector2(this.x * invf, this.y * invf); },
    dot : function(v) { return this.x * v.x + this.y * v.y; }
};
function draw(obj){
    //obj.clear();
    //采用叠加递减效果
    obj.GC.fillStyle = "rgba(0,0,0,0.03)";
    obj.GC.fillRect(0,0,obj.Node.width,obj.Node.height);
    obj.GC.strokeStyle='#72d6fc';
    
    var halfW = obj.Node.width/2;
    var halfH = obj.Node.height/2;
    
    //扩散波动圆
    obj.GC.lineWidth=1;
    for(var k=0;k<5;k++){
        obj.GC.beginPath();
        obj.GC.arc(halfW,halfH,r1+k,0,Math.PI*2,'#72d6fc',true);
        obj.GC.closePath();
        obj.GC.stroke();
        
        obj.GC.beginPath();
        if(!bFirst)
            obj.GC.arc(halfW,halfH,r2+k,0,Math.PI*2,'#72d6fc',true);
        obj.GC.closePath();
        obj.GC.stroke();
    }
    if(r1 > R){
        r1=0;
    }
    if(r2 > R){
        r2 = 0;
        if(bFirst==true){
            bFirst=false;
        }
    }
    r1+=0.3,r2+=0.3
    
    //旋转扫描线
    obj.GC.lineWidth=6;
    obj.GC.save();
    obj.GC.translate(obj.Node.width/2,obj.Node.height/2);
    obj.GC.rotate(degree*Math.PI/180);
    obj.GC.beginPath();
    obj.GC.moveTo(0,-3);
    obj.GC.lineTo(0,R);
    obj.GC.closePath();
    obj.GC.stroke();
    obj.GC.restore();
    
    //开始画网格
    for(var i=0;i<obj.Node.width;i+=10){
        line(obj.GC,'#7266fc',0.5,i+0.5,0,i+0.5,obj.Node.height);
    }
    for(var j=0;j<obj.Node.height;j+=10){
        line(obj.GC,'#7266fc',0.5,0,j+0.5,obj.Node.width,j+0.5);
    }
    //中心小圆点
    obj.GC.fillStyle = '#c00';
    obj.GC.beginPath();
    obj.GC.arc(halfW,halfH,4,0,Math.PI*2,true);
    obj.GC.closePath();
    obj.GC.fill();
    
    obj.GC.fillStyle = '#c00';
    obj.GC.beginPath();
    obj.GC.arc(halfW/2,halfH/2,4,0,Math.PI*2,true);
    obj.GC.closePath();
    obj.GC.fill();
    
    degree++;
}
//画线方法封装
function line(gc,color,width,startX,startY,endX,endY){
    gc.strokeStyle = color;
    gc.lineWidth=width;
    gc.beginPath();
    gc.moveTo(startX,startY);
    gc.lineTo(endX,endY);
    gc.closePath();
    gc.stroke();
}
var obj1 = CreateCanvasObject('c1',draw);
var R = Math.sqrt(Math.pow(obj1.Node.width/2,2)+Math.pow(obj1.Node.height/2,2));
var r1=0,r2=R/2,bFirst=true;
//页面打开自动运行
obj1.start();
//obj1.stop();
</script>
</body>
</html> -->


<!-- <!doctype html>
<html>

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="Expires" content="0" />
</head>

<body>
    <div class="plugin">
        <div id="divPlugin" class="plugin"></div>
    </div>
    </div>
</body>

<script type="text/javascript" id="videonode" src="./static/lib/hikvision/codebase/webVideoCtrl.js"></script>

<script>
    // 检查插件是否已经安装过
    if (-1 == WebVideoCtrl.I_CheckPluginInstall()) {
        alert("您还未安装过插件，双击开发包目录里的WebComponents.exe安装！");
    }

    // 初始化插件参数及插入插件
    WebVideoCtrl.I_InitPlugin("700", "500", {
        iWndowType: 1,
        cbSelWnd: function (xmlDoc) {
            console.log(xmlDoc);
        }
    });

    WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");

    // 检查插件是否最新
    if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
        alert("检测到新的插件版本，双击开发包目录里的WebComponents.exe升级！");
    }

    var iRet = WebVideoCtrl.I_Login(
        "192.168.1.64",
        1,
        "80",
        "admin",
        "123qweasd",
        {
            success: function (xmlDoc) {
                console.log("登录成功");
                WebVideoCtrl.I_StartRealPlay("192.168.1.64", {
                    iWndIndex: 0,
                    iStreamType: 1,
                    iChannelID: 1,
                    bZeroChannel: false,
                    success: function () {
                        console.log("开始预览成功 ");
                    },
                    error: function (status, xmlDoc2) {
                        if (status === 403) {
                            console.log("szInfo 设备不支持Websocket取流！");
                        } else {
                            console.log("开始预览失败 ");
                        }
                    }
                });
            },
            error: function () {
                console.log("登录失败");
            }
        }
    );

    // iRet = WebVideoCtrl.I_StartRealPlay("192.168.1.64", {
    //     iWndIndex: 0,
    //     iStreamType: 1,
    //     iChannelID: 1,
    //     bZeroChannel: false,
    //     success: function () {
    //         console.log("开始预览成功 ");
    //     },
    //     error: function (status, xmlDoc2) {
    //         if (status === 403) {
    //             console.log("szInfo 设备不支持Websocket取流！");
    //         } else {
    //             console.log("开始预览失败 ");
    //         }
    //     }
    // });
</script>
<style>
    html body {
        width: 100%;
        height: 100%;
    }

    .plugin {
        width: 100%;
        height: 100%;
    }
</style>

</html> -->







<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Video视频截图</title>
    <style>
        body,
        h1,
        h2,
        p {
            margin: 0;
            padding: 0;
        }

        html {
            font-family: "微软雅黑";
            background-color: #e9e9e9;
        }

        h1 {
            font-size: 24px;
            font-weight: normal;
            padding: 20px 0;
            text-align: center;
            color: #858585;
            background: -webkit-linear-gradient(rgba(0, 186, 255, .8), rgba(0, 130, 255, .8));
            border-bottom: 1px solid #009cff;
            color: #FFF;
            margin-bottom: 50px;
        }

        video {
            display: block;
            margin: 0 auto 30px auto;
        }

        canvas {
            display: none;
        }

        button {
            display: block;
            width: 480px;
            height: 50px;
            font-size: 24px;
            margin: 0 auto;
            border: 1px solid #0085ff;
            color: #FFF;
            background: -webkit-linear-gradient(rgba(80, 170, 255, .8), rgba(0, 132, 255, .8));
            cursor: pointer;
            border-radius: 5px;
            margin-bottom: 30px;
        }

        button:hover {
            background: -webkit-linear-gradient(rgba(0, 132, 255, .8), rgba(80, 170, 255, .8));
            border-color: #1988ff;
        }

        h2,
        p {
            width: 480px;
            margin: 0 auto;
            color: #858585;
        }

        h2 {
            margin-bottom: 1em;
            font-size: 18px;
        }

        p {
            font-size: 14px;
            line-height: 24px;
        }
    </style>
    <script>
        window.onload = function () {
            var button = document.querySelectorAll('.screen')[0];
            var video = document.querySelectorAll('video')[0];
            var canvas = document.querySelectorAll('canvas')[0];
            var ctx = canvas.getContext('2d');
            var width = 480;
            var height = 270;

            canvas.width = width;
            canvas.height = height;
            video.src = '/home/dingjia/Work/lstm_classification/动作识别-3/test-MP4/guolai/guolai_dj1.mp4?t=' + new Date().getTime();
            video.width = width;
            video.height = height;
            video.autoplay = true;
            video.loop = true;
            button.onclick = function () {
                ctx.drawImage(video, 0, 0, width, height);  // 将video中的数据绘制到canvas里
                saveImage(canvas, 'screen_' + new Date().getTime() + '.png');  // 存储图片到本地
            };
        };
        function saveImage(canvas, filename) {
            var image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
            saveFile(image, filename || 'file_' + new Date().getTime() + '.png');
        }
        function saveFile(data, filename) {
            save_link.href = data;
            save_link.download = filename;

            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
        }
    </script>
</head>

<body>
    <h1>Video视频截图</h1>
    <video controls="controls" autoplay webkit-playsinline playsinline>仅支持H264格式MP4</video>
    <canvas></canvas>
    <button class="screen">截图</button>
    <h2>当前，video 元素支持三种视频格式：</h2>
    <p>Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件</p>
    <p>MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件</p>
    <p>WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件</p>
</body>

</html>